<template>
	<view style="display: flex;flex-direction: column;height: 100vh;">
		<div style="display: flex;justify-content: center;width: 100%;">
			<div style="width: 90%;height: 240rpx;background-color: #ffffff;display: flex;justify-content: center;align-items: center;">
				<img src="/static/猪肉.png" style="width: 100%;height: 200rpx;">
			</div>
		</div>
		<!-- 商品 -->
		<div class="hj1">
			<div class="yr">
				<div v-for="(item,index) in jk" :key="index">
					<span
						style="padding: 5rpx;display: flex;flex-direction: row;align-items: center;">
						<div >
							<img :src="item.jksn" style="width: 140rpx;height: 140rpx;border-radius: 40rpx;">
						</div>
						<div style="width: 80%;padding: 5%;">
							<span style="font-size: 80%;">
								{{item.yrf}}
							</span>
							<div style="">
								<div style="color: #757575;font-size: 60%;">
								{{item.yuro}}
								</div>
							<div style="display: flex;flex-direction: row;font-size: 80%;margin-top: 5%;">
								{{item.wuyuan}}
								<div style="margin-left: 420rpx;">
									<img :src="item.gomai" style="width: 40rpx;height: 40rpx;">
								</div>
							</div>
							</div>
						</div>
					</span>
				</div>
			</div>
			<div class="yr">
				<div v-for="(item,index) in jk" :key="index">
					<span
						style="padding: 5rpx;display: flex;flex-direction: row;align-items: center;">
						<div >
							<img :src="item.jksn" style="width: 140rpx;height: 140rpx;border-radius: 40rpx;">
						</div>
						<div style="width: 80%;padding: 5%;">
							<span style="font-size: 80%;">
								{{item.yrf}}
							</span>
							<div style="">
								<div style="color: #757575;font-size: 60%;">
								{{item.yuro}}
								</div>
							<div style="display: flex;flex-direction: row;font-size: 80%;margin-top: 5%;">
								{{item.wuyuan}}
								<div style="margin-left: 420rpx;">
									<img :src="item.gomai" style="width: 40rpx;height: 40rpx;">
								</div>
							</div>
							</div>
						</div>
					</span>
				</div>
			</div>
			<div class="yr">
				<div v-for="(item,index) in jk" :key="index">
					<span
						style="padding: 5rpx;display: flex;flex-direction: row;align-items: center;">
						<div >
							<img :src="item.jksn" style="width: 140rpx;height: 140rpx;border-radius: 40rpx;">
						</div>
						<div style="width: 80%;padding: 5%;">
							<span style="font-size: 80%;">
								{{item.yrf}}
							</span>
							<div style="">
								<div style="color: #757575;font-size: 60%;">
								{{item.yuro}}
								</div>
							<div style="display: flex;flex-direction: row;font-size: 80%;margin-top: 5%;">
								{{item.wuyuan}}
								<div style="margin-left: 420rpx;">
									<img :src="item.gomai" style="width: 40rpx;height: 40rpx;">
								</div>
							</div>
							</div>
						</div>
					</span>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default{
		data(){
			return{

				jk: [
					{ jksn: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', yrf: '鸭肉',yuro:'测试', wuyuan: '$5', gomai: '/static/add.png' }
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.hj1{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 600rpx;
		background-color: #ffffff;
		
		align-items: center;
		
	}
	.yr {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 90%;
		height: 180rpx;
		background-color: #ffffff;
		justify-content: center;
	}
	
	.yr {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 90%;
		height: 180rpx;
		background-color: #ffffff;
		justify-content: center;
	}
	.yr {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 90%;
		height: 180rpx;
		background-color: #ffffff;
		justify-content: center;
	}
</style>